<!--
 * @Encoding:
 * @Descripttion:
 * @Author: Y2014188432
 * @Date: 2022-04-27 15:27:11
-->
<template>
  <div id="root">
    <div id="login">
      <!-- 分隔符 -->
      <el-col :span="24"><br/><br/></el-col>
      <!--头部登录-->
      <el-col :span="6" :offset="9"><span style="font-size: 30px">登&nbsp;&nbsp;录</span></el-col>
      <!-- 分隔符 -->
      <el-col :span="24"><br/></el-col>
      <!-- 手机输入框 -->
      <el-col :span="20" :offset="2">
        <el-input clearable v-model="phone" placeholder="手机号"/>
      </el-col>
      <!-- 分隔符 -->
      <el-col :span="24"><br/></el-col>
      <!-- （验证码，获取验证码） OR （密码） -->
      <el-col :span="20" :offset="2">
        <!-- ************************   分支1     ********************************** -->
        <!-- （验证码，获取验证码） -->
        <el-col :span="24" v-if="codeOrPW">
          <!-- 验证码输入框 -->
          <el-col :span="16">
            <el-input clearable v-model="code" placeholder="验证码"/>
          </el-col>
          <!-- 获取验证码按钮 -->
          <el-col :span="4" :offset="1">
            <el-button @click="getCode" :disabled="count!==0">{{msg1}}</el-button>
          </el-col>
        </el-col>
        <!-- ************************   分支2     ********************************** -->
        <!-- （密码）  *** 分支2 *** -->
        <el-col :span="24" v-if="!codeOrPW">
          <el-input show-password v-model="password" placeholder="密码"/>
        </el-col>
      </el-col>
      <!-- 分隔符 -->
      <el-col :span="24"><br/><br/><br/><br/></el-col>
      <!-- 登录按钮 -->
      <el-col :span="3" :offset="10">
        <el-button @click="login">登录</el-button>
      </el-col>
      <!-- 底部状态栏 -->
      <!-- 分隔符 -->
      <el-col :span="24"><br/></el-col>
      <!-- 状态栏 -->
      <el-col :span="3" :offset="6"><el-link @click="tourist">游客</el-link></el-col>
      <el-col :span="4" :offset="1"><el-link @click="change">{{changeVul}}</el-link></el-col>
      <el-col :span="3" :offset="1"><el-link @click="lossPw">忘记密码</el-link></el-col>
      <!-- 分隔符 -->
      <el-col :span="24"><br/></el-col>
      <!-- 声明-->
      <el-col :span="20" :offset="2">
        <el-radio v-model="readMe" label="ok">
          未注册手机验证后自动登录，注册即代表同意<p @click="">《隐私保护指引》《平台管理规范》</p>
        </el-radio>
      </el-col>
    </div>
  </div>
</template>

<script>
import LoginComponents from "../components/LoginComponents";
export default {
  name: "Login",
  code: "",
  components: { LoginComponents},
  data() {
    return {
      loginButton:'登录/注册',
      password:'',
      codeOrPW:true,
      changeVul:"密码登录",
      phone: "",
      code: "",
      canGetCode: false,
      msg1: "获取验证码",
      count: 0,
      success: true,
      readMe:""
    };
  },
  methods: {
    // 登录
    login:function(){
        if(this.readMe !== 'ok'){
            this.$message.error("请勾选用户协议");
            return;
        }
      if(this.changeVul === '密码登录'){
        this.loginByCode();
      }else{
        this.loginByPw();
      }
    },

    // 根据手机号获取验证码
    getCode: function () {
      this.$axios
        .get("/api/user/getCode", {
          params: {
            phone: this.phone,
          },
        })
        .then((res) => {
          const tmpData = res.data;
          if (tmpData.success) {
            this.okMsg("成功发送验证码");
            this.countDown();
          } else {
            this.errorMsg(tmpData.errorMsg);
            this.phone = "";
          }
        })
        .catch((res) => {
          console.log(res);
          this.errorMsg(res);
        });
    },

    // 根据手机号、验证码登录
    loginByCode: function () {
      let params = new URLSearchParams();
      params.append("phone", this.phone);
      params.append("code", this.code);

      this.$axios
        .post("/api/user/loginByCode", params)
        .then((res) => {
          const tmpData = res.data;
          console.log(res);
          if (tmpData.success) {
            this.okMsg("登录成功");
            localStorage.setItem("token",tmpData.data);
            this.$router.push("/home");
          } else {
            this.errorMsg(tmpData.errorMsg);
          }
        })
        .catch((res) => {
          console.log("请求失败！");
          this.errorMsg(res);
        });
    },

    // 根据手机号、密码登录
    loginByPw:function(){
      let params = new URLSearchParams();
      params.append("phone", this.phone);
      params.append("password", this.password);
      this.$axios
        .post("/api/user/loginByPw", params)
        .then((res) => {
          const tmpData = res.data;
          console.log(res);
          if (tmpData.success) {
            this.okMsg("登录成功");
            localStorage.setItem("token",tmpData.data);
            this.$router.push("/home");
          } else {
            this.errorMsg(tmpData.errorMsg);
          }
        })
        .catch((res) => {
          console.log("请求失败！");
          this.errorMsg(res);
        });
    },

    // 切换密码登录
    change:function(){
      this.codeOrPW = !this.codeOrPW;
      if(this.changeVul==="密码登录"){
        this.changeVul = "验证码登录";
        this.loginButton = "登录";
      }else{
        this.changeVul = "密码登录";
        this.loginButton = "登录/注册";
      }
    },

    // 倒计时
    countDown: function () {
      this.count = 60; //赋值60秒
      const times = setInterval(() => {
        this.count--; //递减
        this.msg1 = this.count + "秒后重试";
        if (this.count <= 0) {
          this.msg1 = "获取验证码";
          clearInterval(times);
        }
      }, 1000); //1000毫秒后执行
    },

    // 异常信息提示
    errorMsg: function (errorMsg) {
      this.$message.error(errorMsg);
    },

    // 正确信息提示
    okMsg: function (okMsg) {
      this.$message.success(okMsg);
    },

    // 游客登录
    tourist:function () {
      this.$message.error("改功能未开放");
    },

    // 忘记密码
    lossPw:function () {
      this.$message.error("请使用验证码方式登录");
    }
  },
};
</script>

<style scoped>
#login {
  width: 450px;
  height: 430px;
  position: absolute;
  right: 32%;
  bottom: 20%;
  /* 设置圆角 */
  border-radius: 30px;
  /* 白底半透明 */
  background: rgba(255, 255, 255, 0.5);
}

#root {
  width: 100%;
  height: 100%;
  background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0165625576d19800000059ff821340.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653796498&t=ee4335ec1cc486ac2f77ea4129907e92");
  background-size: 100% 100%;
}
</style>
